<template>
  <div class="contarner">
      <div v-for="(item ,index) in naviList" :key="index" @click="$route.path == item.path ? '': $router.push(item.path),selectClass =index" :class="index == selectClass?'isActive' : ''">
          <div class="icon"><i :class="item.iconClass"></i></div>
          <div>{{item.title}}</div>
      </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
            selectClass:'',
            naviList:[
                {
                    iconClass:'cc- cc-shouye',
                    title:'首页',
                    path:'/home'
                    
                },
                {
                    iconClass:'cc- cc-sousuo',
                    title:'搜索',
                    path:'/search'
                },
                {
                    iconClass:'cc- cc-dingdan',
                    title:'订单',
                    path:'/order'
                },
                {
                    iconClass:'cc- cc-wode',
                    title:'我的',
                    path:'/mine'
                },
            ]

        }
    }

}
</script>

<style lang="less" scoper>
.contarner{
    background-color: #fff;
    padding: 10px;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    position: fixed;
    bottom: 0;
    font-size: 30px;
    // div{
    //     flex:1;
    // }
    i{
    font-size: 56px;

    }
    border-top: 2px solid #cfcfcf;
    .isActive{
        color: var(--themeColor);
    }
}

</style>